<template>
  <div>
    <el-menu mode="horizontal"
      :default-active="menuActiveIndex + ''">
      <!-- <el-menu-item index="home" @click="$router.push({ name: 'home' }); menuActiveIndex = 'home'" style="display: none;">
        <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>
        <span slot="title">首页</span>
      </el-menu-item> -->
      <el-menu-item
        v-for="(menu, index) in menuList"
        :key="menu.menuId"
        :menu="menu"
        :dynamicMenuRoutes="dynamicMenuRoutes"
        :index="index + ''" @click="menuClick(menu.id)">
          <icon-svg :name="menu.icon || icons[index % icons.length]" class="site-sidebar__menu-icon"></icon-svg>
          <!-- <span>{{ menu.name }}</span> -->
          <span>{{ $t('menu.' + menu.name) }}</span>

      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        dynamicMenuRoutes: [],
        icons: ['role', 'admin', 'zonghe', 'tubiao', 'shouye', 'pinglun']
      }
    },
    components: {},

    computed: {
      menuActiveIndex: {
        get () {
          let id = this.$store.state.common.topMenuActiveId
          let index = 0
          if(id && id != -1) {
            this.menuList.map((item, i) => {
              if (item.id == id)index = i
            })
          }
          return index
         }
      },
      menuList: {
        get () { return this.$store.state.common.menuList },
        set (val) { this.$store.commit('common/updateMenuList', val) }
      }
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(sessionStorage.getItem('dynamicMenuRoutes') || '[]')
      let id = this.$route.meta.parentId
      if (id && id != -1) {
        this.$store.commit('common/updateTopMenuActiveId', id)
      }
    },

    methods: {
      menuClick (id) {
        this.$store.commit('common/updateTopMenuActiveId', id)
      }
    }
  }
</script>
<style lang="" scoped>
  .el-menu--horizontal>.el-menu-item {
    line-height: 50px;
    height: 50px;
  }
</style>
